<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="agencies-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
            <a v-show="!show.edit" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="show.edit = false">关闭</a>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>选择页面</label>
            </div>
        </div>
    </div>

    <div class="row" v-show="!show.edit">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>管理员</th>
                    <th>管理员手机号</th>
                    <th>合同期限</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id || '默认'}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.admin}}</td>
                    <td>{{item.admin_username}}</td>
                    <td>{{item.contract_expired}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)" v-if="item.id">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page v-model="page.page" :rows="page.rows" :last="page.last" ></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group">
                    <label>名称（全称）：</label>
                    <input class="form-control" v-model="edit_item.name">
                </div>

                <div class="form-group" v-if="edit_item.id">
                    <label>Logo</label>
                    <file-uploader v-model="edit_item.logo" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>

                <div class="form-group">
                    <label>介绍：</label>
                    <textarea class="form-control" v-model="edit_item.intro" style="resize: vertical"></textarea>
                </div>

                <div class="form-group" v-if="edit_item.id">
                    <label>营业执照：</label>
                    <file-uploader v-model="edit_item.business_license" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>

                <div class="form-group" v-if="edit_item.id">
                    <label>营业执照号：</label>
                    <input class="form-control" v-model="edit_item.business_license_number">
                </div>

                <div class="form-group">
                    <label>地址：</label>
                    <input class="form-control" v-model="edit_item.corporate_address">
                </div>

                <div class="form-group">
                    <label>联系人：</label>
                    <input class="form-control" v-model="edit_item.contact_person">
                </div>

                <div class="form-group">
                    <label>联系电话：</label>
                    <input class="form-control" v-model="edit_item.contact_number">
                </div>

                <div class="form-group">
                    <label>机构提成 (0.00 - 1.00)：</label>
                    <input class="form-control" v-model="edit_item.profit_rate" type="number" min="0" max="1" step="0.01">
                </div>

                <div class="form-group">
                    <label>分销员默认提成 (0.00 - 1.00)：</label>
                    <input class="form-control" v-model="edit_item.salesman_profit_rate" type="number" min="0" max="1" step="0.01">
                </div>

                <div class="form-group" v-if="edit_item.id">
                    <label>合同到期时间：</label>
                    <input class="form-control" type="date" v-model="edit_item.contract_expired">
                </div>

                <div class="form-group " :class="{'has-error':exists.adminUser}">
                    <label>管理员用户名：</label>
                    <input v-if="!exists.admin" class="form-control" v-model="edit_item.admin_username" @blur="checkAccount">
                    <span v-else class="form-control" >{{edit_item.admin_username}}</span>
                </div>

                <div class="form-group">
                    <label>管理员密码：</label>
                    <input class="form-control" v-model="edit_item.admin_password">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save" v-show="!exists.adminUser">保存</a>
                    <a class="btn btn-default disabled" v-show="exists.adminUser">保存</a>
                    <a class="btn btn-default" @click="show.edit = false">关闭</a>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->

<script>

    var agencies_app = new Vue({
        el: '#agencies-app',
        data: {
            list: [],
            edit_item: {},
            page: {
                rows: 0,
                page: 0
            },
            classes: [],
            show: {
                edit: false,
                save: false
            },
            exists: {
                adminUser: false,
                admin: false
            }
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/agencies/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data;
                        this.page.page = resp.current_page;
                        this.page.rows = resp.per_page;
                    }.bind(this)
                });
            },
            add: function () {
                this.edit_item = {};
                this.exists.admin = false;
                this.show.edit = true;
                this.show.save = false;
            },
            edit: function (item) {
                this.edit_item = item;
                this.exists.admin = !!item.admin_username;
                this.show.edit = true;
                this.show.save = true;
            },
            save: function () {
                var item = this.edit_item;
                if (!item.name) {
                    alert('请完善资料！');
                    return;
                }
                if (!this.exists.admin) {
                    if (!item.admin_username || !item.admin_password) {
                        alert('请输入管理员用户名和密码');
                        return
                    }
                }

                ajax({
                    uri: '/agencies/save',
                    data: item,
                    success: function(resp){
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item) {
                ajax({
                    uri: '/agencies/del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            },
            checkAccount: function () {
                if (this.edit_item.admin_username)
                ajax({
                    uri: '/agencies/check_account',
                    data: {mobile: this.edit_item.admin_username},
                    success: function (resp) {
                        this.exists.adminUser = resp.data.exists;
                        if (resp.data.exists) {
                            showAlert('error', "用户名已经存在，请重新输入！");
                        }
                    }.bind(this)
                });
            }
        },
        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            }
        }
    });
</script>